<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/jsp/common/headHome.jsp"%>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .header {
        height: 60px;
        background-color: #A7BDBE;
        display: flex;
        align-items: center;
    }

    .content {
        width: 70%;
        margin: 0 auto;
        color: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .content-pic {
        width: 78%;
        margin: 0 auto;
        margin-top: 40px;
        flex-wrap:wrap;
        display: flex;
        align-items: center;
        /*justify-content: space-between;*/
    }

    .pic {
        height: 100px;

        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 50px;
        /*justify-content: space-between;*/

    }

    .pic img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
    }
    /* 分页导航样式 */
    .pagination {
        text-align: center;
        margin-top: 140px;
    }

    .page-link {
        display: inline-block;
        padding: 5px 10px;
        margin: 0 5px;
        text-decoration: none;
        color: #333;
        border: 1px solid #ccc;
    }

    .active {
        background-color: #42b983;
        color: white;
    }

    .prev,
    .next {
        cursor: pointer;
    }
</style>
<div class="right">


    <div style=" margin-top:50px;text-align: center ">
        <h1>领养中心</h1>
    </div>

    <div class="content-pic">

        <c:forEach items="${userList}" var="pet">
        <div class="pic">
            <a href="${pageContext.request.contextPath}/sys/pet/toUpdate?id=${pet.id}">
                <img src="statics/images/home.jpg" /></a>
            <div style="margin-top: 20px; border: 1px solid #e9e9e9;text-align: center;padding: 15px;">
                <div style="margin-top: -20px;background-color: white;">${pet.petName}</div>
                <p style="color: #ccc">${pet.remark}</p>
            </div>
            </a>
        </div>
        </c:forEach>











    </div>

    <!-- 分页导航 -->
    <div class="pagination">
        <a href="${pageContext.request.contextPath}/sys/pet/list?pageIndex=1" class="page-link">首页</a>
        <c:if test="${currentPageNo>1}">
            <a href="${pageContext.request.contextPath}/sys/pet/list?pageIndex=${currentPageNo-1}"
               class="page-link prev">&lt;&lt;</a>
        </c:if>

        <c:forEach begin="1" end="${totalPageCount}" var="pageIndex">
            <a href="${pageContext.request.contextPath}/sys/pet/list?pageIndex=${pageIndex}" class="page-link    <c:if test="${currentPageNo==pageIndex}">active</c:if>" >${pageIndex}</a>
        </c:forEach>
        <c:if test="${currentPageNo<totalPageCount}">
            <a href="${pageContext.request.contextPath}/sys/pet/list?pageIndex=${currentPageNo+1}"
               class="page-link next">&gt;&gt;</a>
        </c:if>
        <a href="${pageContext.request.contextPath}/sys/pet/list?pageIndex=${totalPageCount}" class="page-link">末页</a>
    </div>
<%--    <input type="hidden" id="totalPageCount" value="${totalPageCount}"/>--%>
<%--    <c:import url="/WEB-INF/jsp/sysRole/rollpage.jsp">--%>
<%--        <c:param name="totalCount" value="${totalCount}"/>--%>
<%--        <c:param name="currentPageNo" value="${currentPageNo}"/>--%>
<%--        <c:param name="totalPageCount" value="${totalPageCount}"/>--%>
<%--    </c:import>--%>


    <!--点击删除按钮后弹出的页面-->
    <div class="zhezhao"></div>
    <div class="remove" id="removeUse">
        <div class="removerChid">
            <h2>提示</h2>
            <div class="removeMain">
                <p>确定删除该用户吗？</p>
                <a href="#" id="yes">是</a>
                <a href="#" id="no">否</a>
            </div>
        </div>
    </div>

<%--    <%@include file="/WEB-INF/jsp/common/foot.jsp" %>--%>
    <script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/sysUser/list.js"></script>
